<template>
	<section class="container mt-4">
		<h3 class="mb-4 dark-grey-text font-weight-bold"><strong>团队</strong></h3>
		<div class="row mb-5">
			<!-- Grid column -->
			<div class="col-lg-4 col-md-12 mb-4">
				<!-- Card -->
				<div class="card card-cascade narrower">
					<!-- Card image -->
					<div class="view view-cascade gradient-card-header purple-gradient">
						<h2 class="card-header-title">Mattonit</h2>
						<p>The Boar</p>
						<div class="text-center">
							<!-- Facebook -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fab fa-facebook-f"></i></a>
							<!-- Twitter -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fab fa-twitter"></i></a>
							<!-- Google + -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"
								><i class="fab fa-google-plus-g"></i
							></a>
						</div>
					</div>
					<!-- Card image -->
					<!-- Card content -->
					<div class="card-body card-body-cascade text-center">
						<p class="card-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod
							quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim
							ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
						</p>
					</div>
					<!-- Card content -->
				</div>
				<!-- Card -->
			</div>
			<!-- Grid column -->
			<!-- Grid column -->
			<div class="col-lg-4 col-md-6 mb-4">
				<!-- Card -->
				<div class="card card-cascade wider card-transparent">
					<!-- Card image -->
					<div class="view view-cascade gradient-card-header peach-gradient">
						<h2 class="card-header-title mb-2">桃酥大王团队</h2>
						<p class=""><i class="fas fa-calendar"></i> 2020-01-12</p>
						<div class="text-center">
							<!-- Play,function doc -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fab fa-facebook-f"></i></a>
							<!-- Todo List overview -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fab fa-twitter"></i></a>
							<!-- Google + -->
							<a type="button" class="btn-floating btn-small waves-effect waves-light"><i class="fab fa-google-plus-g"></i></a>
						</div>
					</div>
					<!-- Card image -->
					<!-- Card content -->
					<div class="card-body card-body-cascade ext-center">
						<p class="card-text mr-2 ml-2 pb-1">
							团队协作是指通过团队完成某项制定的事件时所显现出来的自愿合作和协同努力的精神。
							团队协作如果运用的好，对管理团队特别的重要，可以培养团队的向心力。
						</p>
						<router-link :to="{ name: 'Team', params: { teamId: 1 }}" class="orange-text mt-1 d-flex flex-row-reverse">
							<h5 class="waves-effect p-2">GO <i class="fas fa-chevron-right"></i></h5>
						</router-link>
						<!-- <a href="/team/1" class="orange-text mt-1 d-flex flex-row-reverse">
							<h5 class="waves-effect p-2">GO <i class="fas fa-chevron-right"></i></h5>
						</a> -->
					</div>
					<!-- Card content -->
				</div>
				<!-- Card -->
			</div>
			<!-- Grid column -->
			<!-- Grid column -->
			<div class="col-lg-4 col-md-6 mb-4">
				<!-- Card -->
				<div class="card card-cascade">
					<!-- Card image -->
					<div class="view view-cascade gradient-card-header blue-gradient">
						<h2 class="card-header-title">Marta</h2>
						<p>Deserve for her own card</p>
					</div>
					<!-- Card image -->
					<!-- Card content -->
					<div class="card-body card-body-cascade text-center">
						<p class="card-text pb-2">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod
							quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim
							ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
						</p>
						<hr />
						<!-- Twitter -->
						<a class="p-2 m-2 fa-lg tw-ic"><i class="fab fa-twitter"> </i></a>
						<!-- Linkedin -->
						<a class="p-2 m-2 fa-lg li-ic"><i class="fab fa-linkedin-in"> </i></a>
						<!-- Facebook -->
						<a class="p-2 m-2 fa-lg fb-ic"><i class="fab fa-facebook-f"> </i></a>
						<!-- Email -->
						<a class="p-2 m-2 fa-lg email-ic"><i class="fas fa-envelope"> </i></a>
					</div>
					<!-- Card content -->
				</div>
				<!-- Card -->
			</div>
			<!-- Grid column -->
		</div>
	</section>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
export default {
	name: "Home",
	components: {
		// HelloWorld,
	},
};
</script>
